<template>
  <view>
    <view v-if="fixed" :style="'height:' + navBarHeight + 'rpx;'"></view>
    <view class="navbar" :class="{nobg: !showbg}"
          :style="'height:' + navBarHeight + '; padding-top: ' + statusBarHeight + '; position:' + (fixed ? 'fixed' : 'absolute')">
      <view class="capsule" v-if="back || home">
        <view bindtap="toBack" v-if="back">
          <image src="/images/ic_back.png"></image>
        </view>
      </view>
      <view class="title">{{ text }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    },
    navbar: {
      type: String,
      default: 'navbar'
    },
    showbg: {
      type: Boolean,
      default: true
    },
    fixed: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      back: false,
      home: false,
      statusBarHeight: 0,
      navBarHeight: 0
    };
  },
  created() {
    const app = getApp();
    this.statusBarHeight = app.statusBarHeight + 'px'
    this.navBarHeight = app.navBarHeight + 'px'
  },
  /*created() {
    let pages = getCurrentPages();
    // 如果没有上一页
    var noBackArr = [
      'pages/index/index',
      'pages/zuopin/index',
      'pages/clone/index',
      'pages/my/my'
    ]
    if (pages.length > 1 || !noBackArr.includes(pages[0].route)) {
      this.setData({
        back: true
      })
    }
    const app = getApp();
    this.setData({
      statusBarHeight: app.statusBarHeight + 'px',
      navBarHeight: app.navBarHeight + 'px'
    })
  },
  onHide() {
    if (this.article && this.article.content_type === 'video' && this.$refs.video) {
      this.$refs.video.pause()
    }
  },
  methods: {
    toHome() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
    toBack() {
      uni.navigateBack({
        fail: () => {
          this.toHome()
        }
      });
    }
  }*/
}
</script>

<style>
.navbar {
  background: none;
  width: 100%;
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  box-sizing: border-box;
  align-items: center;
  display: flex;
}

/* .nobg {
	background: none;
} */

.title-container {
  height: 88 rpx;
  align-items: center;
  position: relative;
}

.capsule {
  margin-left: 10 rpx;
  height: 64 rpx;
  display: flex;
  align-items: center;
  z-index: 99;
}

.capsule > view {
  width: 64 rpx;
  height: 64 rpx;
  position: relative;
  border-radius: 8 rpx;
}

.capsule > view:active {
  background: rgba(0, 0, 0, 0.1);
}

.capsule image {
  width: 100%;
  height: 100%;
}

.title {
  width: 100%;
  color: #1b1c1c;
  font-size: 36rpx;
  font-family: 微软雅黑;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  padding: 0 180rpx;
  box-sizing: border-box;
  z-index: 98;
}

</style>
